<template>
    <view class="content">
        <view class="top">
            <view class="group">
                <navigator url="/uni_modules/uni-id-pages/pages/userinfo/userinfo">
                    <view class="flex aic" @click="toUser">
                        <view class="nav">
                            <image :src="giveAvatar(userInfo)" mode="aspectFill" v-if="hasLogin && giveAvatar(userInfo)"></image>
                            <image src="../../static/images/user-default.jpg" mode="aspectFill" v-else></image>
                        </view>
                        <view>
                            <view class="mgl20 cf" v-if="hasLogin">
                                <view class="nameLimit" @click="toUser">
                                    <text v-if="hasLogin">{{ giveName(userInfo) }}</text>
                                    <text v-else>匿名</text>
                                </view>
                            </view>
                            <view class="mgl20" v-else>
                                <view class="nameLimit">点击登录</view>
                            </view>
                        </view>
                    </view>
                </navigator>
                <view @click="logOut" class="cf" v-if="hasLogin">
                    <u-button type="error" text="退出登录" size="small" plain></u-button>
                </view>
            </view>
            <view class="bg">
                <image :src="giveAvatar(userInfo)" mode="aspectFill" v-if="hasLogin && giveAvatar(userInfo)"></image>
                <image src="../../static/images/user-default.jpg" mode="aspectFill" v-else></image>
            </view>
        </view>
        <view class="main">
            <!-- 头部拓展 -->
            <view class="card">
                <view class="flex jcsb">
                    <view class="colBox">
                        <view class="fs28">可提佣金</view>
                        <view class="flex aic">
                            <u-icon name="red-packet" color="red" size="18"></u-icon>
                            <span class="mgl10">0</span>
                        </view>
                    </view>
                    <view class="colBox">
                        <view class="fs28">总收益</view>
                        <view class="flex aic">
                            <u-icon name="red-packet" color="red" size="18"></u-icon>
                            <span class="mgl10">0</span>
                        </view>
                    </view>
                    <view class="colBox">
                        <view class="fs28">注册时间</view>
                        <view class="flex aic">
                            <u-icon name="clock" color="red" size="18"></u-icon>
                            <span class="mgl10 fs18">
                                <uni-dateformat :date="userInfo.register_date" :threshold="[3600, 99 * 365 * 24 * 60 * 60 * 1000]" v-if="hasLogin"></uni-dateformat>
                            </span>
                        </view>
                    </view>
                </view>
            </view>
            <!-- <view class="card flex jcsb">
                <span class="fwb fs28">没有佣金收入?赶快去分享店铺吧!</span>
                <span class="fs24 flex">
                    查看店铺
                    <u-icon name="arrow-right" color="#999" size="16"></u-icon>
                </span>
            </view> -->
            <!-- 后台 -->
            <navigator class="card fs28 fwb" v-if="toAdmin" url="/pages_main/index/index">
                <view class="flex jcsb">
                    商家后台
                    <u-icon name="arrow-right" color="#999" size="16"></u-icon>
                </view>
            </navigator>
            <!-- 订单 -->
            <view class="card">
                <view class="flex jcsb">
                    <span class="fwb fs28">我的订单</span>
                    <!-- <span class="fs24 flex">
                        全部订单
                        <u-icon name="arrow-right" color="#999" size="16"></u-icon>
                    </span> -->
                </view>
                <u-divider></u-divider>
                <view>
                    <u-grid :border="false" col="5">
                        <u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex" @click="toPage(baseListItem.url)">
                            <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="baseListItem.name" :size="22"></u-icon>
                            <text class="grid-text">{{ baseListItem.title }}</text>
                        </u-grid-item>
                    </u-grid>
                </view>
            </view>
            <!-- 服务 -->
            <view class="card">
                <view class="fwb fs28">我的服务</view>
                <u-divider></u-divider>
                <view>
                    <u-grid :border="false" col="4">
                        <u-grid-item v-for="(baseListItem, baseListIndex) in mySelf" :key="baseListIndex" @click="toPage(baseListItem.url)">
                            <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="baseListItem.name" :size="22"></u-icon>
                            <text class="grid-text">{{ baseListItem.title }}</text>
                        </u-grid-item>
                    </u-grid>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js';
import { computed, ref } from 'vue';
import { giveName, giveAvatar } from '../../utils/tools.js';

const baseList = [
    {
        name: 'chat',
        title: '待确认',
        url: '111'
    },
    {
        name: 'rmb-circle',
        title: '待付款',
        url: '112'
    },
    {
        name: 'car',
        title: '待发货',
        url: '113'
    },
    {
        name: 'checkmark-circle',
        title: '已完成',
        url: '114'
    },
    {
        name: 'order',
        title: '所有订单',
        url: '/pages/ucenter/order/list'
    }
];
const mySelf = [
    {
        name: 'chat',
        title: '绑定手机',
        url: '111'
    },
    {
        name: 'rmb-circle',
        title: '店铺会员',
        url: '112'
    },
    {
        name: 'car',
        title: '申请跑腿',
        url: '113'
    },
    {
        name: 'checkmark-circle',
        title: '商品收藏',
        url: '114'
    },
    {
        name: 'order',
        title: '浏览足迹',
        url: '115'
    },
    {
        name: 'order',
        title: '关于我们',
        url: '115'
    },
    {
        name: 'order',
        title: '联系客服',
        url: '115'
    },
    {
        name: 'order',
        title: '提现客服',
        url: '115'
    }
];

function toPage(url) {
    uni.navigateTo({
        url
    });
}
// 登录信息
let userInfo = computed(() => {
    return store.userInfo;
});
let hasLogin = computed(() => {
    return store.hasLogin;
});
//退出登录
function logOut() {
    if (isLogin()) return;
    uni.showModal({
        title: '是否退出登录?',
        success: (res) => {
            if (res.confirm) {
                mutations.logout();
            }
        }
    });
}

function isLogin() {
    if (!hasLogin.value) {
        uni.showToast({
            title: '未登录',
            icon: 'none'
        });
        return true;
    }
    return false;
}
function toUser() {
    if (hasLogin) {
        uni.navigateTo({
            url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
        });
    } else {
        uni.reLaunch({
            url: '/pages/index/index'
        });
    }
}

let roleList = ['admin', 'merchant'];
let roles = uniCloud.getCurrentUserInfo().role;
const toAdmin = computed(() => {
    return roleList.some((i) => roles.includes(i));
});
</script>
<style lang="scss">
page {
    background-color: $uni-bg-color-grey;
}
</style>
<style lang="scss" scoped>
.top {
    padding-top: var(--status-bar-height);
    position: relative;
    z-index: 10;

    .group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        padding: 80rpx 40rpx;

        .nav {
            width: 100rpx;
            height: 100rpx;

            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
    }

    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -1;
        border-radius: 0 0 30rpx 30rpx;

        image {
            width: 100%;
            height: 100%;
            filter: blur(20px);
            transform: scale(2);
            opacity: 2;
        }
    }

    .nameLimit {
        font-size: 42rpx;
        font-weight: bold;
        color: white;
        max-width: 300rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
    }
}

.main {
    position: absolute;
    width: 100%;
    transform: translate(0, -50rpx);
    z-index: 100;

    .card {
        border-radius: 10rpx;
        background-color: #fff;
        padding: 25rpx 15rpx;
        margin: 20rpx;

        .colBox {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 50rpx;
            border-right: 1px solid $uni-border-color;

            &:last-child {
                border-right: none;
            }
        }

        .grid-text {
            font-size: 22rpx;
            color: #909399;
            padding: 0 10rpx;
            /* #ifndef APP-PLUS */
            box-sizing: border-box;
            /* #endif */
        }
    }
}
</style>
